<template>
	<el-dialog v-model="dialogFormVisible" :title='title' width="600px" align-center draggable>
		<div class="dialog-content">
			<el-form ref="ruleFormRef" :model="formData" :label-position="labelPosition" :rules="rules"
				label-width="120px">
				<el-form-item label="入库编号" prop="product_id">
					<el-input v-model="formData.product_id" />
				</el-form-item>
				<el-form-item label="产品名称" prop="product_name">
					<el-input v-model="formData.product_name" />
				</el-form-item>
				<el-form-item label="产品类别" prop="product_category">
					<el-select v-model="formData.product_category" placeholder="请选择产品类别">
						<!-- <el-option v-for="item in categoryData" :key="item" :label="item" :value="item" /> -->
                         <el-option label="食品类" value="食品类" />
					</el-select>
				</el-form-item>
				<el-form-item label="产品单位" prop="product_unit">
					<el-select v-model="formData.product_unit" placeholder="请选择产品单位">
						<el-option label="个" value="个" />
						<el-option label="件" value="件" />
					</el-select>
				</el-form-item>
				<el-form-item label="产品入库数量" prop="product_in_warehouse_number">
					<el-input v-model="formData.product_in_warehouse_number" />
				</el-form-item>
				<el-form-item label="产品入库单价" prop="product_single_price">
					<el-input v-model="formData.product_single_price" />
				</el-form-item>
				<el-form-item label="入库操作人" prop="product_create_person">
					<el-input v-model="formData.product_create_person" />
				</el-form-item>
				<el-form-item label="入库备注" prop="in_memo">
					<el-input v-model="formData.in_memo" :rows="2" type="textarea" />
				</el-form-item>
			</el-form>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" @click="edit">
					确定
				</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import {ref,reactive} from 'vue'
import {createProduct,editProduct} from '@/api/product/index'
import type {createProductForm} from '@/api/product/type'
import { ElMessage } from "element-plus"
const dialogFormVisible = ref<boolean>(false)
const labelPosition = ref('left')
const formData:createProductForm = reactive({
    product_id:'',
    product_name:'',
    product_category:'',
    product_unit:'',
    product_in_warehouse_number:'',
    product_single_price:'',
    product_create_person:'',
    in_memo:'',
})
	const rules = reactive({
		product_id: [
			{ required: true, message: '请输入入库编号', trigger: 'blur' },
		],
		product_name: [
			{ required: true, message: '请输入产品名称', trigger: 'blur' },
		],
		product_category: [
			{ required: true, message: '请选择产品类别', trigger: 'blur' },
		],
		product_unit: [
			{ required: true, message: '请选择产品单位', trigger: 'blur' },
		],
    product_in_warehouse_number: [
			{ required: true, message: '请输入产品入库数量', trigger: 'blur' },
		],
		product_single_price: [
			{ required: true, message: '请输入产品入库单价', trigger: 'blur' },
		],
		product_create_person: [
			{ required: true, message: '请输入入库操作人', trigger: 'blur' },
		],
	})
//点击确定事件
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const edit = async()=>{
    const res =  title.value  == '新增产品入库' ? await createProduct(formData)  : await editProduct(formData)
    if(res.status == 0){
         ElMessage({
            type:'success',
            message:title.value  == '新增产品入库' ? '入库成功' : '编辑成功'
        })
        dialogFormVisible.value = false
        emit('success')
    }else{
        ElMessage({
            type:'error',
            message: title.value  == '新增产品入库' ? '入库失败' : '编辑失败'
        })
    }
}

const title = ref('')
const open = (row:any)=>{
    if(row){
        title.value = '编辑产品入库'
        Object.assign(formData,{...row})
    }else{
        title.value = '新增产品入库'
    }
    dialogFormVisible.value = true
}
defineExpose({
    open
})
</script>

<style lang="scss" scoped>
	.dialog-content {
		display: flex;
		padding: 20px 30px;
	}

	:deep(.el-form-item) {
		margin: 30px;
	}
</style>
